<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Examples</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <input v-model="inputVal" placeholder="请输入任务" @keyup.enter="addItem">
        <div>
            <h2>
                正在进行-----------{{doing}}
            </h2>
            <ul>
                <li v-for="(item,index) in list" v-show="!item.checked" style="list-style: none">
                    <input type="checkbox" v-model="item.checked" >
                    {{item.inputVal}}
                    <button @click="remove(index)">删除</button>
                </li>
            </ul>

            <h2>
                已经完成-----------{{list.length-doing}}
            </h2>
            <ul>
                <li v-for="(item,index) in list"  v-show="item.checked" style="list-style: none">
                    <input type="checkbox" v-model="item.checked" >
                    {{item.inputVal}}
                    <button @click="remove(index)">删除</button>
                </li>
            </ul>
        </div>

    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                //input输入的值
                inputVal:"",
                // 输入后生成的数组
                list:[]

            },
            methods:{
                addItem(){
                    this.list.push({
                        inputVal:this.inputVal,
                        //默认未勾选的状态
                        checked:false
                    });
                    this.inputVal="";

                },

                remove(index){
                    this.list.splice(index,1);
                }
            },
            //计算属性
            computed: {
                doing() {
                    //过滤掉已经完成的数据列表
                    //固定语法。return data数据对象中的内容
                    return this.list.filter((item) => {
                        return item.checked === false;
                    }).length
                }
            }

        })
    </script>
</body>

</html>